<template>
    <el-row class="lucidity-note-header-container">
        <el-col :span="12" class="lucidity-note-header-left-area">
            <el-icon class="lucidity-note-header-icon" @click="notebookDialog()"><Notebook /></el-icon>
            <!-- <el-icon class="lucidity-note-header-icon"><Upload /></el-icon> -->
            <el-icon class="lucidity-note-header-icon" @click="userSettings()"><User /></el-icon>
        </el-col>

        <el-col :span="12" class="lucidity-note-header-right-area">
            <el-select class="lucidity-note-header-selects" 
                placeholder="请选择笔记本"
                v-model="currNotebook" 
                value-key="id"
                @change="changeNotebook">
                <el-option
                    v-for="notebook in notebooks"
                    :key="notebook.id"
                    :label="notebook.name"
                    :value="notebook"
                    />
            </el-select>
        </el-col>
    </el-row>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" :width="dialogWidth" class="lucidity-note-header-dialog">
        <!--
            :is 需要显示的组件
            :asideTransfer 需要下带到子组件的参数
        -->
        <component 
            :is="dialogContent" 
            :asideTransfer="asideTransfer"
            @reload-notebook="reloadNotebook">
        </component>
    </el-dialog>
</template>

<script>
    import {ref, reactive, toRefs, onMounted, shallowRef} from "vue";
        
    export default ({
        props:['appTransfer'],

        setup(props, {emit}) {
            const LUCIDITY_NOTE_HEADER_DATASET = reactive({
                dialogVisible: false,
                dialogTitle: "dialog-title",
                dialogWidth: "45%",
                dialogContent: null,
                currNotebook: props.appTransfer.currNotebook,
                notebooks: props.appTransfer.notebooks ? props.appTransfer.notebooks : [],
                // 父组件传子组件传值容器
                asideTransfer: {},
            })

            /**
             * 打开笔记本信息弹窗
             */
            const notebookDialog = () => {
                LUCIDITY_NOTE_HEADER_DATASET.dialogVisible = true;
                LUCIDITY_NOTE_HEADER_DATASET.dialogTitle = "笔记本信息";
                LUCIDITY_NOTE_HEADER_DATASET.dialogWidth = "40%";
                LUCIDITY_NOTE_HEADER_DATASET.asideTransfer = {notebook: LUCIDITY_NOTE_HEADER_DATASET.currNotebook == null ? {} : LucidityNoteApp.Helper.clone(LUCIDITY_NOTE_HEADER_DATASET.currNotebook)}
                LUCIDITY_NOTE_HEADER_DATASET.dialogContent = shallowRef(LucidityNoteApp.defineAsyncComponent(LucidityNoteApp.VIEWS.notebook));
            };

            /**
             * 用户设置
             */
            const userSettings = () => {
                LUCIDITY_NOTE_HEADER_DATASET.dialogVisible = true;
                LUCIDITY_NOTE_HEADER_DATASET.dialogTitle = "用户设置";
                LUCIDITY_NOTE_HEADER_DATASET.dialogWidth = "40%";
                LUCIDITY_NOTE_HEADER_DATASET.dialogContent = shallowRef(LucidityNoteApp.defineAsyncComponent(LucidityNoteApp.VIEWS.settings));
            };
            
            /**
             * 重新加载笔记本信息
             * @param {json} params 
             */
            const reloadNotebook = (params) => {
                if (params.action === "update") {
                    LUCIDITY_NOTE_HEADER_DATASET.notebooks = LUCIDITY_NOTE_HEADER_DATASET.notebooks
                        .filter(item => item.id !== LUCIDITY_NOTE_HEADER_DATASET.currNotebook.id);
                    LUCIDITY_NOTE_HEADER_DATASET.notebooks.push(params.notebook);
                } else if (params.action === "new") {
                    LUCIDITY_NOTE_HEADER_DATASET.notebooks.push(params.notebook);
                    if (LUCIDITY_NOTE_HEADER_DATASET.currNotebook === undefined || LUCIDITY_NOTE_HEADER_DATASET.currNotebook === null) {
                        // 如果是第一次新增，那么当前笔记本显示就选择新增的这个
                        LUCIDITY_NOTE_HEADER_DATASET.currNotebook = params.notebook
                        // 并且初始化 Aside 树
                        LucidityNoteApp.$mitt.emit(LucidityNoteApp.COMMANDS.loadTree, params.notebook)
                    } 
                }
            };

            /**
             * 笔记本切换 ChangeEvent
             * @param {object} notebook 
             */
            const changeNotebook = (notebook) => {
                // 发送加载树指令，让 aside 边栏加载
                LucidityNoteApp.$mitt.emit(LucidityNoteApp.COMMANDS.loadTree, notebook)
            };

            return {
                ...toRefs(LUCIDITY_NOTE_HEADER_DATASET),
                notebookDialog,
                reloadNotebook,
                changeNotebook,
                userSettings
            }
        }
    })
</script>

<style scoped>
    .lucidity-note-header-container {
        cursor: pointer;
        width: var(--lucidity-note-full-width);
        height: var(--lucidity-note-full-height);
    }

    .lucidity-note-header-right-area {
        text-align: right;
    }

    .lucidity-note-header-left-area {
        text-align: left;
    }

    .lucidity-note-header-dropdown {
        height: var(--lucidity-note-app-header-height);
        line-height: var(--lucidity-note-app-header-height);
        color: var(--lucidity-note-font-color);
        padding-right: .5rem;
    }

    .lucidity-note-header-icon {
        height: var(--lucidity-note-app-header-height);
        line-height: var(--lucidity-note-app-header-height);
        padding: 0 .3rem;
    }

    .lucidity-note-header-icon:hover {
        color: var(--lucidity-note-common-hover-color);
    }

    .lucidity-note-header-selects {
        width: auto;
        max-width: 100%;
    }
</style>

<style>
    .lucidity-note-header-dialog .el-dialog__body  {
        padding: .6rem;
    }

    .lucidity-note-header-selects .el-input__wrapper {
        background: transparent;
        box-shadow: none !important;
    }

    .lucidity-note-header-selects .el-input__inner {
        text-align: right;
        font-weight: 600;
        color: var(--lucidity-note-font-color);
    }

    .lucidity-note-header-selects .el-select__caret {
        font-weight: 600;
        color: var(--lucidity-note-font-color)!important;
    }
</style>